<template>
    <div style="width:100%;height:100%;">
        <div class="login-box animated bounceInDown">
            <div class="left">
                <el-carousel :interval="3000" :loop="true" arrow="always" height="500px">
                    <el-carousel-item v-for="(item,index) in info.banner" :key="index">
                        <el-image class="img" fit="cover" :src="item.image"></el-image>
                    </el-carousel-item>
                </el-carousel>
            </div>
            <div class="right">
                <div class="font30 bold">{{ info.short_name }} 后台管理系统</div>
                <div class="font16 mt-20 color-info">一起出发 梦想同行</div>
                <div class="input mt-40">
                    <el-input v-model="obj.username" class="font16 pl-10 bold" prefix-icon="el-icon-mobile-phone"
                              size="large"
                              placeholder="请输入用户名或手机号"></el-input>
                </div>
                <div class="input mt-20">
                    <el-input v-model="obj.password" type="password" class="font16 pl-10 bold"
                              prefix-icon="el-icon-lock"
                              size="large" placeholder="请输入密码"></el-input>
                </div>
                <el-button v-preventDbClick class="width100 mt-50 font16 bold" type="primary" @click="login(1)">登录
                </el-button>
            </div>
        </div>
        <div id="particles" :style="{backgroundImage:'url('+info.bg+')'}"></div>
    </div>
</template>

<script type="text/ecmascript-6">
import request from '../../common/js/request.js';
import {tool} from '@/common/js/tool';
import {particleParams} from '@/common/js/particle';

export default {
    data() {
        return {
            obj: {
                username: 'admin',
                password: '123456'
            },
            info: {
                short_name: "创鲜乡品",
                logo: "https://vemp003-test.oss-cn-guangzhou.aliyuncs.com/1684192361436554220.png",
                name: "创鲜乡品",
                bg: "https://vemp001.oss-cn-guangzhou.aliyuncs.com/1683407943519834164.jpeg",
                share_bg: "https://vemp003-test.oss-cn-guangzhou.aliyuncs.com/1684192448389317109.jpeg",
                share_title: "粤西·创鲜乡品特产电商平台",
                share_image: "https://vemp003-test.oss-cn-guangzhou.aliyuncs.com/1684192408813880989.png",
                banner: [
                    {"image": "https://vemp001.oss-cn-guangzhou.aliyuncs.com/1683416423845403406.jpeg"},
                    {"image": "https://vemp003-test.oss-cn-guangzhou.aliyuncs.com/1684145873805675378.jpeg"},
                    {"image": "https://vemp001.oss-cn-guangzhou.aliyuncs.com/1683407982508727633.jpeg"}
                ]
            }
        }
    },

    computed: {},

    created() {
        // this.info = {
        //   short_name: "创鲜乡品",
        //   logo: "https://vemp003-test.oss-cn-guangzhou.aliyuncs.com/1684192361436554220.png",
        //   name: "创鲜乡品",
        //   bg: "https://vemp001.oss-cn-guangzhou.aliyuncs.com/1683407943519834164.jpeg",
        //   share_bg: "https://vemp003-test.oss-cn-guangzhou.aliyuncs.com/1684192448389317109.jpeg",
        //   share_title: "粤西·创鲜乡品特产电商平台",
        //   share_image: "https://vemp003-test.oss-cn-guangzhou.aliyuncs.com/1684192408813880989.png",
        //   banner: [
        //     {"image": "https://vemp001.oss-cn-guangzhou.aliyuncs.com/1683416423845403406.jpeg"},
        //     {"image": "https://vemp003-test.oss-cn-guangzhou.aliyuncs.com/1684145873805675378.jpeg"},
        //     {"image": "https://vemp001.oss-cn-guangzhou.aliyuncs.com/1683407982508727633.jpeg"}
        //   ]
        // }
    },

    mounted() {
        particlesJS('particles', particleParams);
        this.getData();
    },

    methods: {
        getData() {
            request({
                url: '/manage/example/getAll',
            }).then((res) => {
                this.info = res.data;
                tool.setCookie('company_information', JSON.stringify(res.data));
            })
        },
        async login() {
            let res = await request({
                url: '/manage/login',
                data: this.obj,
                method: 'post'
            })
            tool.setCookie('token', res.data);
            let a = await request({url: '/manage/getUserInfo'})
            tool.setCookie('userinfo', JSON.stringify(a.data));
            this.$router.push({path: "/home"});
        },
    },

    components: {}
};
</script>

<style lang="less" rel="stylesheet/less" scoped>
.login-box {
    width: 900px;
    height: 500px;
    box-shadow: 0 0 30px white;
    border-radius: 6px;
    background: white;
    position: fixed;
    top: 50%;
    left: 50%;
    margin: -250px 0 0 -450px;
    z-index: 8;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    overflow: hidden;

    .left {
        width: 340px;

        .img {
            width: 340px;
            height: 500px;
            border-radius: 6px 0 0 6px;
        }
    }

    .right {
        width: 0;
        flex: 1;
        padding: 0 50px;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .input {
            border-bottom: 1px solid #eee;
        }

        /deep/ .el-input__inner {
            border: none;
        }
    }

    .logo {
        width: 100px;
        height: 100px;
    }
}

#particles {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    //background-image: url("../../common/images/no_image.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
}

</style>


